<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分类</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="./css/swipeslider.css">
    <style>
        #full_feature {
            margin: 0;
            padding: 0;
        }

        .swipslider .sw-slide {
            width: '100%';
            height: 12rem;
            margin: 0;
            padding: 0;
        }

        .swipslider .sw-slide img {
            height: 12rem;
            width: 100%;
        }

        .goods-name {
            background: rgba(255, 255, 255, 1);
            height: 3rem;
            line-height: 3rem;
            vertical-align: center;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            border-bottom: 0.1rem solid rgba(238, 238, 238, 1);
        }

        .left {
            margin-left: 0.5rem;
        }

        .sale-price {
            height: 2rem;
            background: rgba(255, 255, 255, 1);
            font-size: 1rem;
            font-family: MicrosoftYaHei;
            color: rgba(231, 37, 16, 1);
            line-height: 2rem;
            vertical-align: center;
        }

        .org-price {
            height: 1.5rem;
            line-height: 1.5rem;
            vertical-align: center;
            background: rgba(255, 255, 255, 1);
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        .freight-location {
            height: 1.5rem;
            line-height: 1.5rem;
            vertical-align: center;
            background: rgba(255, 255, 255, 1);
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }

        .freight-location .reght {
            margin-right: 0.5rem;
        }

        .freight {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
        }

        .location {
            font-size: 0.5rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
        }

        .mchDesc {
            height: 2rem;
            display: -webkit-flex;
            display: flex;
            /*background: rgba(255, 255, 255, 1);*/
            vertical-align: center;
            line-height: 2rem;
            font-size: 0.5rem;
            justify-content: space-around;
        }

        .desc-icon {
            margin-right: 0.3rem;
            height: 0.5rem;
            width: 0.5rem;
            background: rgba(255, 147, 38, 1);
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        }

        .picDetail {
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            height: 2rem;
            vertical-align: center;
            line-height: 2rem;
            background: rgba(255, 255, 255, 1);
        }

        .line {
            width: 5rem;
            height: 0.05rem;
            background: rgba(255, 147, 38, 1);
            margin-top: 1rem;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }

        .show-text {
            font-size: 0.75rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        .footer-opt {
            width: 100%;
            position: fixed;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            bottom: 2.5rem;
        }

        .add-cart {
            text-align: center;
            width: 50%;
            height: 2.5rem;
            background: rgba(253, 253, 253, 1);
            line-height: 2.5rem;
            color: rgba(255, 147, 38, 1);
        }

        .shopping {
            text-align: center;
            width: 50%;
            height: 2.5rem;
            background-color: #FFCA4B;
            line-height: 2.5rem;
            color: rgba(253, 253, 253, 1);
        }
    </style>
</head>

<body>
<!-- 你的html代码 -->
<div class="page">
    <!--<header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" data-transition='slide-out'>
            <span class="icon icon-left"></span>
            返回
        </a>
        <h1 class="title">首页</h1>
    </header>-->
    <nav class="bar bar-tab">
        <a class="tab-item active" href="./index.html">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" href="./category.html">
            <span class="icon icon-menu"></span>
            <span class="tab-label">分类</span>
        </a>
        <a class="tab-item" href="./cart.html">
            <span class="icon icon-cart"></span>
            <span class="tab-label">购物车</span>
        </a>
        <a class="tab-item" href="./personal.html">
            <span class="icon icon-me"></span>
            <span class="tab-label">我的</span>
        </a>
    </nav>
    <!-- 这里是页面内容区 -->
    <div class="content">
        <!-- Slider -->
        <figure id="full_feature" class="swipslider">
            <ul class="sw-slides">

            </ul>
        </figure>
        <div class="goods-name">
            <span class="left">测试</span>
        </div>
        <div class="sale-price">
            <span class="left">￥109.00</span>
        </div>
        <div class="org-price">
            <span class="left">价格:￥499.00</span>
        </div>
        <div class="freight-location">
            <div class="freight left">快递&nbsp;免运费</div>
            <div class="location right">福建厦门</div>
        </div>
        <div class="mchDesc">
            <div class="time">
                <span class="desc-icon">&nbsp;√&nbsp;</span>
                <span class="time-desc">卖家曾诺24小时内发货</span>
            </div>
            <div class="real">
                <span class="desc-icon">&nbsp;√&nbsp;</span>
                <span class="real-desc">如实描述</span>
            </div>
            <div class="fast">
                <span class="desc-icon">&nbsp;√&nbsp;</span>
                <span class="fast-desc">极速退款</span>
            </div>
        </div>
        <div class="picDetail">
            <div class="line"></div>
            <div class="show-text">图文详情</div>
            <div class="line"></div>
        </div>
        <div class="goodsDetail"></div>
        <div class="footer-opt">
            <div class="add-cart" onclick="addCart(this)">加入购物车</div>
            <div class="shopping" onclick="shopping(this)">立即购买</div>
        </div>
    </div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="./js/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script src="./js/swipeslider.min.js"></script>
</body>
<script>
    var goodsId;
    $(function () {
        $('#full_feature').swipeslider();
        goodsId = window.location.search.split("=")[1];
        $.getJSON(prefix + "/goodsInfo/api/getGoodsDetail/" + goodsId, function (data) {
            if (data.code == 0) {
                $(".title").text(data.data.flName);
                $(".swipslider .sw-slides").html('<li class="sw-slide"><img src="' + data.data.flRotationPic + '"></li>');
                $(".goods-name .left").text(data.data.flName);
                $(".sale-price .left").text("￥" + data.data.flSalePrice);
                $(".org-price .left").text("价格:￥" + data.data.flOriginalPrice);
                $(".goodsDetail").html(data.data.flDetail);
            }
        });
    });

    //加入购物车
    function addCart(obj) {
        $.post(prefix + "/userCart/api/addGoodsToCart", {
            'userId': '1',
            'goodsId': goodsId,
            'quantity': 1
        }, function (data) {
            var r = JSON.parse(data);
            if (r.code == 0) {
                window.location.href = "./cart.html";
            }
        });
    }

    //立即购买
    function shopping(obj) {
        //1.加入购物车
        $.post(prefix + "/userCart/api/addGoodsToCart", {
            'userId': '1',
            'goodsId': goodsId,
            'quantity': 1
        }, function (data) {
            var r = JSON.parse(data);
            if (r.code == 0) {
                window.location.href = "./my/payPage.html?q=null";
            }
        });
    }
</script>

</html>
